<template>
    <div class="company-introduction">
      <h1 style="font-size: 2rem;">好未来公司动态</h1>
      <section>
        <h2>公司概况</h2>
        <p>{{ aboutCompany }}<a href="https://www.100tal.com/" target="_blank" class="read-more">查看更多</a></p>
      </section>
      <section>
        <h2>近期活动</h2>
        <ul>
          <li v-for="milestone in developmentHistory" :key="milestone">{{ milestone }}</li>
        </ul>
        <!-- 图片轮播区域 -->
      <div class="image-gallery">
        <img src="../assets/liwu.png" alt="礼物" class="gallery-image">
        <img src="../assets/dongyuandahui.png" alt="动员大会" class="gallery-image">
        <img src="../assets/gaokao.png" alt="高考" class="gallery-image">
      </div>
      <p><a href="https://www.100tal.com/news1.html" target="_blank" class="read-more">查看更多</a></p>
      </section>
      <section>
        <h2>教育理念</h2>
        <p>{{ educationalConcept }}</p>
      </section>
      <section>
        <h2>产品与服务</h2>
        <ul>
          <li v-for="product in products" :key="product">{{ product }}</li>
        </ul>
        <p><a href="https://www.mathgpt.com/" target="_blank" class="read-more">查看更多</a></p>
      </section>
      <section>
        <h2>社会责任</h2>
        <p>{{ socialResponsibility }}</p>
        <p><a href="https://www.100tal.com/" target="_blank" class="read-more">查看更多</a></p>
      </section>
    </div>
  </template>
  
  <script>
  export default {
    name: 'contentC',
    setup() {
      // 公司概况
      const aboutCompany = '好未来（TAL Education Group）成立于2003年，是中国领先的K12教育科技公司。';
      // 发展历程
      const developmentHistory = [
        '6.07北师大附中志愿送考，为考生提供冷饮',
        '6.18狂欢购物节抽奖送礼物',
        '6.24备战高考志愿填报动员大会',
        // 更多发展里程碑...
      ];
      // 教育理念
      const educationalConcept = '好未来致力于通过科技手段，推动教育个性化、智能化发展。';
      // 产品与服务
      const products = [
        '在线课程',
        '个性化学习解决方案',
        '教育科技产品',
        '高考志愿协助填报',
        // 更多产品与服务...
      ];
      // 社会责任
      const socialResponsibility = '好未来积极履行社会责任，通过教育扶贫等项目，助力教育公平。';
      
      return {
        aboutCompany,
        developmentHistory,
        educationalConcept,
        products,
        socialResponsibility
      };
    }
  };
  </script>
  
  <style scoped>
  .company-introduction {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    color: #333;
    font-family: 'Arial', sans-serif;
  }
  
  .company-introduction h1 {
    font-size: 2.5em;
    color: #0055aa;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .company-introduction section {
    margin-bottom: 40px;
  }
  
  .company-introduction h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
    border-bottom: 2px solid #0055aa;
    padding-bottom: 5px;
    color: #333;
  }
  
  .company-introduction p {
    line-height: 1.6;
    margin-bottom: 10px;
  }
  
  .company-introduction ul {
    list-style-type: none;
    padding: 0;
  }
  
  .company-introduction li {
    background: #f9f9f9;
    border-left: 3px solid #0055aa;
    padding: 10px;
    margin-bottom: 8px;
  }
  
  .company-introduction li::marker {
    color: #0055aa;
  }
  
  @media (max-width: 768px) {
    .company-introduction {
      padding: 10px;
    }
  
    .company-introduction h1 {
      font-size: 2em;
    }
  
    .company-introduction h2 {
      font-size: 1.2em;
    }
    .image-gallery {
  display: flex;
  justify-content: space-between; /* 或使用 margin: 0 10px; 使图片之间有间隔 */
  margin-bottom: 40px; /* 根据需要调整 */
}

.gallery-image {
  width: 33.333%; /* 每张图片占容器宽度的三分之一 */
  object-fit: cover; /* 保持图片比例 */
  border-radius: 8px; /* 圆角边框 */
  transition: transform 0.3s, box-shadow 0.3s; /* 平滑过渡效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
  cursor: pointer; /* 鼠标悬停时变为指针手势 */
  /* 如果你想要图片具有最大宽度限制，可以添加如下属性 */
  /* max-width: 100px; 具体数值根据你的页面布局和图片大小来定 */
}

.gallery-image:hover {
  transform: translateY(-5px); /* 鼠标悬停时上移 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时更深的阴影 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .image-gallery {
    flex-direction: column;
    align-items: center;
  }

  .gallery-image {
    width: 100%; /* 在小屏幕上全宽显示 */
    margin-bottom: 10px; /* 每张图片底部的外边距 */
  }
}
  }


.image-gallery {
  display: flex;
  justify-content: space-between; /* 或使用 margin: 0 10px; 使图片之间有间隔 */
  margin-bottom: 40px; /* 根据需要调整 */
}

.gallery-image {
  width: 33.333%; /* 每张图片占容器宽度的三分之一 */
  object-fit: cover; /* 保持图片比例 */
  border-radius: 8px; /* 圆角边框 */
  transition: transform 0.3s, box-shadow 0.3s; /* 平滑过渡效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
  cursor: pointer; /* 鼠标悬停时变为指针手势 */
  /* 如果你想要图片具有最大宽度限制，可以添加如下属性 */
  /* max-width: 100px; 具体数值根据你的页面布局和图片大小来定 */
}

.gallery-image:hover {
  transform: translateY(-5px); /* 鼠标悬停时上移 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时更深的阴影 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .image-gallery {
    flex-direction: column;
    align-items: center;
  }

  .gallery-image {
    width: 100%; /* 在小屏幕上全宽显示 */
    margin-bottom: 10px; /* 每张图片底部的外边距 */
  }
}
  </style>